import React,{Component} from 'react';
import './Swiperr.scss';
//引入轮播插件
import Swiper from 'swiper/dist/js/swiper.min.js';
import 'swiper/dist/css/swiper.min.css';
class Swiperr extends Component{
    componentDidMount(){
        new Swiper('.swiper-container', {
            loop:true,
            autoplay: 2000,//可选选项，自动滑动            
            observer:true,
            observeParents:true,
            pagination : '.swiper-pagination',
            prevButton:'.swiper-button-prev',
            nextButton:'.swiper-button-next'
            
        })
    }
    render(){
        return (           
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    {
                        this.props.swiperList.map((item,index)=><div key={index} className="swiper-slide">
                            <img src={item.image_url} alt={item.gmt_modified}/>
                        </div>)
                    }                    
                </div>
                <div className="swiper-pagination"></div>
                <div className="swiper-button-prev"></div>
                <div className="swiper-button-next"></div>
            </div>            
        )
    }
}
export default Swiperr;